import React, { useState, useRef, useEffect } from "react";
import style from "./style.module.css";
import { Form, Input, Select } from "antd";
import UploadAvatar from "@c/UploadAvatar";

function GoodsInfoCom(props) {
  let [infoShop, setShopInfo] = useState({});

  useEffect(() => {
    const { getShopInfo } = props;
    getShopInfo(infoShop);
  }, [infoShop]);

  const changeFrom = (e, type) => {
    if (type === "goodsClassify") {
      // console.log(e);
      setShopInfo({ ...infoShop, goodsClassify: e });
    } else {
      let obj = { ...infoShop };
      obj[type] = e.target.value;
      setShopInfo(obj);
    }
  };

  return (
    <div className={style.InfoBox}>
      <div className={style.leftBox}>
        <Form
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          layout="horizontal"
        >
          <Form.Item label="商品名称">
            <Input
              value={infoShop.title}
              onChange={(e) => changeFrom(e, "title")}
            />
          </Form.Item>
          <Form.Item label="商品关键字">
            <Input
              value={infoShop.keyword}
              onChange={(e) => changeFrom(e, "keyword")}
            />
          </Form.Item>
          <Form.Item name={["user", "introduction"]} label="商品简介">
            <Input.TextArea
              value={infoShop.desc}
              onChange={(e) => changeFrom(e, "desc")}
            />
          </Form.Item>
        </Form>
      </div>
      <div className={style.rightBox}>
        <Form
          labelCol={{ span: 0 }}
          wrapperCol={{ span: 13 }}
          layout="horizontal"
        >
          <Form.Item label="商品分类">
            <Select
              value={infoShop.goodsClassify}
              onChange={(e) => changeFrom(e, "goodsClassify")}
            >
              <Select.Option value="demo">Demo</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item label="商品封面图">
            <UploadAvatar />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default GoodsInfoCom;
